<template>
	<view class="content">
		<view class="backGround" :style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @tap="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#333333" size="20"></uv-icon>
							</view>
							<view class="font-size-32 font-weight-500">
								加入我们
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">

			</view>
			<view class="padding-about-24">
				<view class="view display-flex align-items margin-top-20">
					<view class=" file-1">
						<view class="font-size-36 font-weight-500">
							0成本
						</view>
						<view class="font-size-24 margin-top-20" style="color:#7C7C7C ;line-height: 36rpx;">
							不用囤货、不用发货，分享好物就能赚，
							佣金比例高收入上不封顶顶
						</view>
					</view>
					<image :src="imgaeUrl('/static/home/n1.png')" style="width: 180rpx;height: 160rpx;" mode="widthFix">
					</image>
				</view>
				<view class="view display-flex align-items margin-top-20">
					<view class=" file-1">
						<view class="font-size-36 font-weight-500">
							低门槛
						</view>
						<view class="font-size-22 margin-top-20" style="color:#7C7C7C ;line-height: 36rpx;">
							无需押金 无需开店 一键绑定微信小店，
							分享链接就能躺赚分红
						</view>
					</view>
					<image :src="imgaeUrl('/static/home/n2.png')" style="width: 180rpx;height: 160rpx;" mode="">
					</image>
				</view>
				<view class="view display-flex align-items margin-top-20">
					<view class=" file-1">
						<view class="font-size-36 font-weight-500">
							高收益
						</view>
						<view class="font-size-22 margin-top-20" style="color:#7C7C7C ;line-height: 36rpx;">
							您的朋友圈价值百万 加入推客团队，把
							流量变为现金月入轻松翻倍
						</view>
					</view>
					<image :src="imgaeUrl('/static/home/n3.png')" style="width: 186rpx;height: 172rpx;" mode="">
					</image>
				</view>
				<view class="view display-flex align-items margin-top-20">
					<view class=" file-1">
						<view class="font-size-36 font-weight-500">
							灵活自由
						</view>
						<view class="font-size-22 margin-top-20" style="color:#7C7C7C ;line-height: 36rpx;">
							宝妈/学生/上班族副业首选 一部手机+微
							信好友+微信群 微信推客让你边玩边赚
						</view>
					</view>
					<image :src="imgaeUrl('/static/home/n4.png')" style="width: 176rpx;height: 168rpx;" mode="">
					</image>
				</view>
				<view class="view margin-top-20 position-relative">
					<view style="width: 372rpx;height: 60rpx; top: 0;left: 50%;"
						class="position-absolute transform-translate-left display-flex center align-items">
						<image class="position-absolute" :src="imgaeUrl('/static/home/join-title.png')"
							style="width: 372rpx;height: 60rpx;" mode=""></image>
						<view style="z-index: 999;" class="font-size-28 color-FFF font-weight-500">
							三步轻松成为推客赚钱
						</view>
					</view>
					<view class="display-flex margin-top-80 space-between ">
						<view class="display-flex flex-direction-column align-items">
							<image :src="imgaeUrl('/static/home/user.png')" style="width: 120rpx;height: 120rpx;"
								mode=""></image>
							<view class="font-size-24 margin-top-10" style="color: #7C7C7C;">
								注册用户
							</view>
						</view>
						<view class="display-flex align-items">
							<image :src="imgaeUrl('/static/mine/right.png')" style="width: 20rpx;height: 20rpx;"
								mode="widthFix">
							</image>
							<image :src="imgaeUrl('/static/mine/right.png')" style="width: 20rpx;height: 20rpx;"
								mode="widthFix">
							</image>
						</view>
						<view class="display-flex flex-direction-column ">
							<image :src="imgaeUrl('/static/home/jg.png')" style="width: 120rpx;height: 120rpx;" mode="">
							</image>
							<view class="font-size-24 margin-top-10" style="color: #7C7C7C;">
								绑定机构
							</view>
						</view>
						<view class="display-flex align-items">
							<image :src="imgaeUrl('/static/mine/right.png')" style="width: 20rpx;height: 20rpx;"
								mode="widthFix">
							</image>
							<image :src="imgaeUrl('/static/mine/right.png')" style="width: 20rpx;height: 20rpx;"
								mode="widthFix">
							</image>
						</view>
						<view class="display-flex flex-direction-column ">
							<image :src="imgaeUrl('/static/home/fx.png')" style="width: 120rpx;height: 120rpx;" mode="">
							</image>
							<view class="font-size-24 margin-top-10" style="color: #7C7C7C;">
								分享赚钱
							</view>
						</view>
					</view>
					<view @click="addPushUser()" class="button color-FFF font-size-28 margin-top-50 text-center"
						style="padding: 20rpx 262rpx;">
						成为推客
					</view>
				</view>
				<div class="kong"></div>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	onLoad(function(option) {});
	onShow(function() {});
	async function addPushUser() {
		const {
			code,
			data
		} = await api.addPushUser()
		if (code == 0) {
			// nativeUI('申请成功!')
			// navigateBack(2000)
			// uni.$emit('updateuserinfo')
			wx.openBusinessView({
				businessType: data.bind_business_type,
				queryString: data.bind_query_string,
				extraData: {
					commissionType: data.commissionType,
					commissionRatio: data.commissionRatio,
					headSupplierAppid: data.headSupplierAppid,
				}
			})
			// wx.openBusinessView({
			// 	businessType: 'CreatorApplyments',
			// 	queryString: 'redirect_url=%2Fauth%2Fpages%2Fauthorization%2Findex&is_simple_register=1&is_from_promoter=1',
			// 	extraData: {
			// 		commissionType: 1,
			// 		commissionRatio: 0,
			// 		headSupplierAppid: data.appid,
			// 	}
			// })
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.view {
		padding: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.backGround {
		width: 750rpx;
		height: 362rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>